<!DOCTYPE HTML>

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Paxosim</title>
        <link rel="stylesheet" type="text/css" href="./paxosim.css"/>
        <script type="text/javascript" src="./minheap.js"></script>
        <script type="text/javascript" src="./framework.js"></script>
        <script type="text/javascript" src="./paxos.js"></script>
        <script type="text/javascript" src="./ui.js"></script>
    </head>

    <body>
        <div id="container">
        <h1>Paxosim</h1>
         <div id="canvas_wrapper">
            <div class="title">
                    Monitor
            </div>
            <canvas width="480" height="480" id="canvas" onselectstart="return false"></canvas>
        </div>
        <!--<button id="start">Simulate</button>-->
        <div id="menu">
            <div class="panel">
                <div class="title">
                    Global
                </div>
            </div>
            <div class="panel">
				<div class="slot">
                	<div class="hint"> Node Count: </div>
                	<input type="text" class="inputbox" id="node_count"/>
				</div>
				<div class="slot">
                	<div class="hint"> Fail Rate: </div>
                	<input type="text" class="inputbox" id="global_fail_rate"/>
				</div>
				<div class="slot">
                	<div class="hint"> Average Fail Time: </div>
                	<input type="text" class="inputbox" id="avg_fail_time"/>
				</div>
				<div class="slot">
                	<div class="hint"> Propose Timeout: </div>
                	<input type="text" class="inputbox" id="propose_timeout"/>
				</div>
				<div class="slot">
                	<div class="hint"> Listen Timeout: </div>
                	<input type="text" class="inputbox" id="listen_timeout"/>
				</div>
				<div class="slot">
                	<div class="hint"> Duplicate Rate: </div>
                	<input type="text" class="inputbox" id="dup_rate"/>
				</div>
				<div class="slot">
                	<div class="hint"> Loss Rate: </div>
                	<input type="text" class="inputbox" id="loss_rate"/>
				</div>
				<div class="slot">
                	<div class="hint"> Connection Min Time: </div>
                	<input type="text" class="inputbox" id="conn_min_time"/>
				</div>
				<div class="slot">
                	<div class="hint"> Connection Max Time: </div>
                	<input type="text" class="inputbox" id="conn_max_time"/>
				</div>
                <div class="button" id="restart">Restart</div>
            </div>
            <div class="panel">
                <div class="title">
                    Node <span id="node_id">Not Selected</span>
                </div>
            </div>
            <div class="panel">
				<div class="slot">
                	<div class="hint" id="hint_fail_rate">Fail Rate:&nbsp;</div>
                	<input type="text" class="inputbox" id="fail_rate"/>
                	<div class="button" id="propose">Propose</div>
				</div>
            </div>
        </div>
        </div>
        <script>
            //tests = 100;
            //sumRound = 0;
            //X = 0.3;
            //for (var t = 0; t < tests; ++t) {
            //    framework = new Framework(100, X, 50, 100, 1000, X, X, 5, 20);
            //    framework.reset();
            //    for (var j = 0; j < 100; ++j) {
            //        framework.getNodes()[j].request();
            //    }
            //    while (!framework.isAnyPaxosAccepted() && framework._time <= 10000) {
            //        framework.tick();
            //    }
            //    if (framework._time > 10000)
            //        break;
            //    round = Math.ceil(framework._time / framework.paxosProposalTimeout);
            //    sumRound += round;
            //}
            //alert(sumRound / tests);

            framework = new Framework(10, 0.2, 200, 250, 1000, 0, 0, 40, 80);
            ui = new UI(framework,
                document.getElementById("canvas"),
                document.getElementById("menu"));
        </script>
    </body>
</html>
